/**
 * @file heading
 * 负责表格中的头部输出
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
  Component,
  PropTypes
} from 'react';
import {Renderer} from '../../renderer';
import * as cx from 'classnames';
import Searchable from '../../hoc/searchable';
import Html from '../../../widgets/html';

@Renderer({
  name: 'form-heading',
  desc: '负责表格中的头部输出',
  test: /(?:^|\/)table\/heading$/
})
@Searchable
export default class TableHeading extends Component {
  static propTypes = {
    className: PropTypes.string,
    type: PropTypes.string.isRequired,
    sortable: PropTypes.bool,
    label: PropTypes.string
  };

  static defaultProps = {
  };

  render() {
    const {
      className,
      name,
      onCheck,
      onOrderByToggle,
      dragging,
      sortable,
      orderBy,
      orderDir,
      type,
      width,
      loading,
      $allChecked,
      prefix,
      affix,
      searchable,
      localSortByName,
      stateLocalOrderDir,
      stateLocalOrderBy,
      localSortable,
      label
    } = this.props;

    let body = label && ~label.indexOf('\n') ? <Html html={label.replace(/\n/g, '<br />')} /> : label;
    let style = null;
    let sort;

    if (type === 'checkbox') {
      body = onCheck ? (
        <label className="i-checks m-b-none">
          <input type="checkbox" checked={!!$allChecked} disabled={loading} onChange={(e) => onCheck && onCheck(e.currentTarget.checked)} /><i />
        </label>
      ) : null;
    } else if (type === 'drag-bar') {
      body = (
        <i className="fa fa-bars" />
      );
    }

    if (width) {
      style = {width: typeof width === 'number' ? `${width}px` : width};
    }

    if (localSortable && !dragging && !searchable && !sortable) {
      sort = (
        <span className="th-sort">
          <i className={cx("fa fa-sort-down", stateLocalOrderBy === name ? stateLocalOrderDir === 'desc' ? 'text' : 'text-active' : 'text-active')} />
          <i className={cx("fa fa-sort-up", stateLocalOrderBy === name ? stateLocalOrderDir === 'asc' ? 'text' : 'text-active' : 'text-active')} />
          <i className="fa fa-sort" />
        </span>
      );
    }

    if (sortable && !dragging && !searchable) {
      sort = (
        <span className="th-sort">
          <i className={cx("fa fa-sort-down", orderBy === name ? orderDir === 'desc' ? 'text' : 'text-active' : 'text-active')} />
          <i className={cx("fa fa-sort-up", orderBy === name ? orderDir === 'asc' ? 'text' : 'text-active' : 'text-active')} />
          <i className="fa fa-sort" />
        </span>
      );
    }

    return (
      <th
        className={cx(className, {
          'th-operation': type === 'operation',
          'th-sortable': (sortable || localSortable) && !dragging && !searchable,
          'th-searchable': searchable
        })}
        onClick={ (e) => {
            if(!dragging && !searchable) {
              if(sortable) {
                onOrderByToggle(name);
              } else if(localSortable) {
                localSortByName(name);
              }
            }
          }
        }
        style={style}
      >
        {prefix}
        {body}
        {sort}
        {affix}
      </th>
    );
  }
}
